<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.slider-wrap{
				position: relative;
				width: 400px;
				height: 20px;
				background:#eee;
			}
			.slider-bar{
				position: absolute;
				width: 50px;
				height: 20px;
				background: #ccc;
			}
		</style>
	</head>
	<body>
		<div class="slider-wrap">
			<div class="slider-bar">123</div>
		</div>
		<script type="text/javascript">
			
			var sliderWrap = document.querySelector('.slider-wrap')
			var sliderBar = document.querySelector('.slider-bar')
			var orgX=0;
			var orgY=0;
			var areaX=[0,350]
			var areaY=[0,0]
			sliderBar.addEventListener('mousedown',function(e){
				var e = e||window.event
				orgX=e.clientX-sliderBar.offsetLeft
				orgY=e.clientY-sliderBar.offsetTop
				e.preventDefault()
				document.addEventListener('mousemove',touchMove)
				document.addEventListener('mouseup',touchEnd)
				return false
			})
			function touchMove(e){
				var e = e||window.event
				var temp = {
					x:e.clientX-orgX,
					y:e.clientY-orgY
				}
				if(temp.x<areaX[0]){
					temp.x=areaX[0]
				}else if(temp.x>areaX[1]){
					temp.x=areaX[1]
				}
				if(temp.y<areaY[0]){
					temp.y=areaY[0]
				}else if(temp.y>areaY[1]){
					temp.y=areaY[1]
				}
				sliderBar.style.left=temp.x+'px'
				sliderBar.style.top=temp.y+'px'
			}
			function touchEnd(e){
				document.removeEventListener('mousemove',touchMove)
				document.removeEventListener('mouseup',touchEnd)
			}
		</script>
	</body>
</html>
